<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <!--父组件向子组件传递方法，使用的是事件绑定机制： v-on: 当我们定义了一个事件属性之后，
    那么，子组件就能够通过某些方式，来调用传递进去的这个方法了-->
<com2 v-on:func="show"></com2>
</div>
<template id="tmpl">
    <div>
        <h1>这是子组件</h1>
        <input type="button" value="这是子组件的按钮" @click="myclick">
    </div>
</template>

</body>
<script>


    var com2 = {
        template: '#tmpl',
        data(){
            return{
                sonmsg: {name: '小朋友', age: '6'}
            }
        },
        methods: {
            myclick(){
                // emit ：触发
                this.$emit('func', this.sonmsg);
            }
        },
    };



var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。',
        datafromson: null,
    },
    methods:{
      show(data, data2){
          // console.log('调用了父组件方法'+ data + data2)
          console.log(data);
          this.datafromson = data;
      }
    },
    components:{
        com2: com2,
    }

})
</script>
</html>